<template>
  <!---->
  <group-box-container
      :form-datas = "formDatas"
      :form-item = "field"
  >
    <!-- {{ field.preps.elements }} -->
    <el-row v-for = "adata in field.preps.elements" :gutter = "field.preps.gutter" :justify = "field.preps.justify"
            :align = "field.preps.align" :tag = "field.preps.tag">
      <el-col
          :item-key = "index"
          :span = "sdata.colspan||24"
          v-for = "(sdata,index) in adata.columns"
          v-if = "formDatas.isEdit"
      >
        <draggable
            @add = "(evt)=>onDragAdd(evt,sdata.items)"
            class = "smain-design"
            group = "starHorseGroup"
            animation = "100"
            ghostClass = "ghost"
            v-model = "sdata.items"
        >
          <template v-for = "(data,index) in sdata.items">
            <component
                :key = "index"
                :field = "data"
                :form-datas = "formDatas"
                :is = "getComponentName(data)"
                :parentField = "field"
                :star-horse-dynamic-form = "starHorseDynamicForm"
                v-if = "data.compType==='formItem'"
            />
            <component
                :key = "index+200"
                :is = "unknown-item"
                v-else
            />
          </template>
        </draggable>
      </el-col>
      <el-col
          :item-key = "index"
          :span = "sdata.colspan||24"
          style = "border: none"
          v-else
          v-for = "(sdata,index) in adata.columns"
      >
        <template v-for = "data in sdata.items">
          <component
              :field = "data"
              :form-datas = "formDatas"
              :is = "data.type+'-container'"
              :star-horse-dynamic-form = "starHorseDynamicForm"
              @selectItem = "selectItem"
              v-if = "data.compType==='container'"
          >
          </component>
          <component
              :field = "data"
              :form-datas = "formDatas"
              :is = "getComponentName(data)"
              :star-horse-dynamic-form = "starHorseDynamicForm"
              @selectItem = "selectItem"
              v-else-if = "data.compType==='formItem'"
          />
          <component
              :is = "unknown-item"
              v-else
          />
        </template>
      </el-col>
    </el-row>
  </group-box-container>
</template>

<script>
import GroupBoxContainer from './group-box-container'
import UserComponents2 from '../allitem'
import {inject} from 'vue'
import {warning} from '@/utils/message'

export default {
  name: 'box-container',
  components: {GroupBoxContainer, ...UserComponents2},
  props: {
    parentCompType: {type: Object},
    starHorseDynamicForm: {type: Object},
    field: {type: Object},
    formDatas: {type: Object}
  },
  setup() {
    let dragingItem = inject('dragingItem')
    return {
      dragingItem
    }
  },
  data() {
    return {
      containerList: [],
      itemType: 'container'
    }
  },
  methods: {

    getComponentName(data) {
      console.log(data)
      return data.type + '-item'
    },
    onDragAdd(evt, dataList) {
      let _this = this
      let newIndex = evt.newIndex

      if (_this.dragingItem.type == 'box' || _this.dragingItem.type == 'table') {
        warning('容器不能嵌套容器')
        return
      }

      if (newIndex != null && newIndex != 'undefined') {
        _this.formDatas.activeId = dataList[newIndex].id
        _this.formDatas.compType = dataList[newIndex].compType
        _this.formDatas.parentCompType = _this.itemType
      }
    }
  }
}
</script>

<style scoped>
.smain-design {
  width: inherit;
  background: #f1f2f3;
  border-radius: 3px;
  height: 100%;
}

:deep(.el-col) {
  border: 1px dotted gold;
  min-height: 50px;
}
</style>